<template>
  <ElConfigProvider :locale="zhCn">
    <Suspense>
      <XMask
        title="工作流平台"
        :logo="logo || _logo"
        :menus="menus"
        :disabled="disabled"
        :pure="pure"
        :actions="actions"
        @action-click="onActionClick"
        :theme="true"></XMask>
    </Suspense>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { Suspense } from 'vue';
import { ElConfigProvider, ElMessageBox } from 'element-plus';
import {
  XMask,
  useMask,
  SwitchButton,
  type ActionBarItems,
  type ActionProps
} from '@vtj/web';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import _logo from './assets/logo.svg';
const { disabled, menus, logo, pure } = useMask();  
import { useAccess } from '@vtj/renderer';
import { useRouter } from 'vue-router'

const router = useRouter()
const access = useAccess();

const actions: ActionBarItems = [
  {
    name: 'logout',
    tooltip: '退出登录',
    icon: SwitchButton
  }
];

const onActionClick = async (action: ActionProps) => {
  switch (action.name) {
    case 'logout':
      await handleLogout()
      break
  }
};

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确认退出登录吗？', '提示', {
      type: 'warning',
    })
    // 调用退出接口
    access.logout();
  } catch (error) {
    if (error !== 'cancel') {
      console.error('退出失败:', error)
    }
  }
}
</script>
